<template>
	<view class="main">


		<view class="head">
			<text class="head_txt">{{selectedOption}}</text>
		</view>
		<view class="card" :class="{'flipped': isFlipped }" @click="flipCard">
			<view class="card-inner">
				<view class="card-front">{{content}}</view>
				<view class="card-back">
					<image mode="aspectFill" class="card-back-img" :src="img_url">
				</view>
			</view>
		</view>

		<view class="explain">
			点击卡片选择姿势
		</view>


		<view class="pop">

		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedOption: '不知道玩什么姿势？', // 当前选中的选项
				isFlipped: false, // 卡牌是否翻转的标志
				content: '选一种爱爱姿势', //任务内容
				// contents: ["未选择模式"],
				sign: require('./sign.json'),
				img_url: "/static/image/game/posture/132.jpg",
				min:102,
				max:110,
			};
		},
		methods: {
			flipCard() {
				this.isFlipped = !this.isFlipped		

				if (this.isFlipped === true) {
					
					let storedToken = uni.getStorageSync('token');
					let nums = this.sign['cip']
					if (!nums.includes(parseInt(storedToken))) {
						this.selectedOption = "会员可解锁100种姿势，非会员只有8种哦"
					}else{
						this.max = 142
					} 
					console.log(this.max)

					const randNumber = Math.floor(Math.random() * (this.max - this.min) + 1 + this.min);
					
					this.img_url = "/static/image/game/posture/" + randNumber + ".jpg"
			
				}
			},
		

		}
	};
</script>

<style lang="scss">
	.main {
		width: 100%;
		height: 1500rpx;
		background-color: #f472b6;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		color: #fee2e2;
	}


	.head{
		width: 600rpx;
		height: 100rpx;

		.head_txt{
			font-size: 50rpx;
			font-weight: bold;
			text-align: center;
			align-items: center;
			display: block;
			/* 将文本水平居中 */
		}

	}

	.card {
		width: 680rpx;
		height: 500rpx;
		perspective: 1000rpx;
		/* 透视效果 */
	}

	.card-inner {
		width: 100%;
		height: 100%;
		transition: transform 0.5s;
		/* 过渡效果 */
		transform-style: preserve-3d;
		/* 保留 3D 效果 */
	}

	.card-front,
	.card-back {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: pink;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24px;
		backface-visibility: hidden;
		text-align: center;
		color: white;
		/* 隐藏背面 */
	}

	.card-back {
		transform: rotateY(180deg);
		/* 初始时背面朝上 */
	}

	.flipped .card-inner {
		transform: rotateY(180deg);
		/* 卡牌翻转效果 */
	}


	.card-back-img {
		height: 100%;
		width: 100%;
	}


	.explain {
		width: 500rpx;
		height: 300rpx;
		text-align: center;
		font-size: 30rpx;
	}


	//弹窗
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.modal-mask {
		position: fixed;
		z-index: 1000;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.modal-content {
		position: fixed;
		z-index: 1003;
		left: 50%;
		top: 40%;
		transform: translate(-50%, -50%);
		background-color: white;
		padding: 20px;
		border-radius: 10px;
	}

	.input-code {
		display: block;
		border: 1px solid #ccc;
		// padding: 10px;
		margin: 10px 0;
	}

	.btn-row {
		display: flex;
		justify-content: space-around;
	}
</style>